<template>
	<div>
		<el-container>
			<el-header>
				<div style="width: 100%;border-bottom: 1px solid black;margin-top: -20px;line-height: 70px;">
					<span style="font-size: 18px;font-weight: bold;">类型</span>
					<el-button style="float: right;line-height: 40px;width:110px;">添加类型</el-button>
				</div>
			</el-header>
			<el-main>
				<el-table
				    :data="newMenus"
				    border
				    style="width: 100%"
					row-key="type"
					:lazy="true"
					:tree-props="{ children : 'child' }">
				    <el-table-column
				      prop="type"
				      label="书本类型"
				      width="200">
				    </el-table-column>
					<!--  -->
					
					<!--  -->
				    <el-table-column
				      prop="id"
				      label="类型ID"
				      width="200">
				    </el-table-column>
				    <el-table-column
				      prop="prio"
				      label="优先级"
				      width="200">
				    </el-table-column>
					<el-table-column
					  prop="pid"
					  label="添加子节点"
					  width="200">
					  <template #default="scope">
						  <el-button type="primary" v-if="scope.row.pid==0" @click="tj(scope.row.id)">+</el-button>
					  </template>
					</el-table-column>
					<el-table-column
					  label="修改"
					  width="200">
					  <el-button type="warning">🖊</el-button>
					</el-table-column>
				  </el-table>
			</el-main>
		</el-container>
	</div>
</template>

<script>
export default{
	name:'Type2',
	data(){
		return{
			list1:[],
			newMenus:[],
			cs:0,
		}
	},
	// 组件创建之后
	// http://127.0.0.1:8093/api/adm/type/findAll2
	created() {
		// 发起get请求,获取数据
		this.axios.get('/api/adm/type/findAll2').then( (res)=>{
			// 判断状态
			console.log(res);
			if(res.status === 200){
				// 向表格渲染数据
				this.list1 = res.data.data;
				console.log(this.list1);
				// 
				this.getMenu( 0 , this.newMenus );
				console.log(this.newMenus);
			}
		} ).catch( (error)=>{
			console.log(error);
		} )
	},
	methods:{
		// 递归函数
		getMenu( id , arr){
			// 判断
			if( id === 0){
				// 第一级菜单
				this.list1.forEach( item=>{
					if(item.pid === 0){
						arr.push(item);
					}
				});
				// 在第一级菜单完成之后，从第一级的第一个菜单开始，进入第二季菜单的筛选
				this.getMenu( this.newMenus[0].id , this.newMenus);
			}else{
				// 其他等级的菜单
				// 1.循环等级数组：给每个第一级找到第二级
				arr.forEach( (item)=>{
					// 2.将list整个循环，将每个第一级找到第二级
					this.list1.forEach( (val)=>{
						// 判断父级的id === 数据的pid【符合：数据是父级的子级菜单】
						if(item.id === val.pid){
							// 声明一个下一维度的数组
							if( !item.child ) item.child = [];
							// 将符合条件的数据，添加到child下
							item.child.push(val);
						}
					});
					// 每一个等级的36次循环结束之后，重新调用函数，进入下一个等级的操作
					if( item.child){
						// 终止程序
						this.getMenu( 1 , item.child)
					}
				})
			}
		},
		tj(x){
			console.log(x);
		}
	}
}
</script>

<style>
</style>
